<html>

<head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
                .isRed1 {
                        color: red
                }

                .csize {
                        font-size: 20
                }

                div {
                        margin-top: 10px
                }
        </style>

</head>

<body>
        <div id="app">
                <div>{{ foo+'1' }}</div>
                <div v-once>这个将不会改变: {{ msg }}</div>
                <div>Message: {{ msg }},计算值反转: {{reversedMessage1}}，通过方法反转：{{reversedMessage2()}}</div>
                <div><input type="text" v-model="msg" :myatt="foo" :haha="msg"></div>
                <button v-bind:disabled="isButtonDisabled" @click="doclick">Button</button>
                <div v-if="seen">现在你看到我了</div>
                <div v-if="!seen">现在你看不到我了</div>
                <div>

                        <input type="text" @keyup.enter="onEnter1" value="onEnter">

                </div>
                <div v-bind:class="{ isRed1: isRed , csize　:fsize　}" @click="changeSize">
                        class改变样式
                </div>
                <div v-bind:style="{'font-size':addSize}" @click="addSize1">
                        style改变样式,font-size必须’‘扩起来，要么用驮峰命名，否则报错
                </div>
                <div :style="styleObject">
                        style样式
                </div>

                <div @click="testHide">
                        <h1 v-if="awesome">Vue is awesome!点击隐藏</h1>
                        <h1 v-else>Oh no 😢</h1>
                </div>

                <div>
                        <template v-if="ok">
                                <h1>Title</h1>
                                <p>Paragraph 1</p>
                        </template>

                </div>
                <div>
                        <template v-if="loginType === 'username'">
                                <label>Username</label>
                                <input placeholder="Enter your username" name="name11" key="name11">
                        </template>
                        <template v-else>
                                <label>Email</label>
                                <input placeholder="Enter your email address" name="name222" key="name22">
                        </template>
                </div>
                <div>
                        <ul id="example-1">
                                <li v-for="(item,index) of items" 　:id="item.id">
                                        {{ item.message }}"index:"{{index}}
                                </li>
                        </ul>
                        <input v-model="type">
                        <div v-if="type === 'A'">
                                A
                        </div>
                        <div v-else-if="type === 'B'">
                                B
                        </div>
                        <div v-else-if="type === 'C'">
                                C
                        </div>
                        <div v-else>
                                Not A/B/C
                        </div>
                </div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div>
                        <input type="checkbox" id="jack" value="Jack" v-model="form.checkedNames">
                        <label for="jack">Jack</label>
                        <input type="checkbox" id="john" value="John" v-model="form.checkedNames">
                        <label for="john">John</label>
                        <input type="checkbox" id="mike" value="Mike" v-model="form.checkedNames">
                        <label for="mike">Mike</label>
                        <span>Checked names: {{ form.checkedNames }}</span>
                        <br>
                        <input type="checkbox" id="checkbox" value="haha" v-model="form.checked">
                        <label for="checkbox">{{ form.checked }}</label>
                        <br>
                        <input type="radio" name="sex" value="1" id="sex1" v-model="form.sex"><label
                                for="sex1">男</label>
                        <input type="radio" name="sex" value="2" id="sex2" v-model="form.sex"><label
                                for="sex2">女</label>
                        选择了:{{form.sex==1?"男":"女"}}
                        <br>
                        <select v-model="form.sel">
                                <option disabled value="">-请选择-</option>
                                <option value="a">A</option>
                                <!--- 如果没有value返回中间的A --->
                                <option value="b">B</option>
                                <option value="c">C</option>
                        </select>
                        选择了:{{form.sel}}
                        <br>
                        <select v-model="form.sel2">
                                <!-- 内联对象字面量 -->
                                <option v-bind:value="{}">123</option>
                                <option v-bind:value="{text:465,val:2 }">456</option>
                        </select>
                        选择了: t:{{form.sel2.text}},v:{{form.sel2.val}}
                        <br>
                        <input v-model.number="age" type="number">
                        <input v-model.trim="msg">

                        <br>
                        <br>
                        <br>

                </div>
                <div>组件:<br>
                        <blog-post v-for="post in posts" :post="post" :ddd="post.id" aaa="123"/>
                </div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div><button　@click="change">改变</button></div>

        </div>
        <script>
                var data = {
                        foo: "haha",
                        msg: "m消息!",
                        isButtonDisabled: null,
                        form: {
                                checkedNames: ['Mike'],//数组是获取选中的value
                                checked: false,//只表示是否选中
                                sex: "1",
                                sel: "",
                                sel2: "",
                        },
                        posts: [
                                { id: 1, title: 'My journey with Vue', content: '述的这个和一' },
                                { id: 2, title: 'Blogging with Vue', content: '来的示例使用' },
                                { id: 3, title: 'Why Vue is so fun', content: '的模板字符串来让多' }
                        ],
                        seen: false,
                        isRed: true,
                        fsize: true,
                        awesome: true,
                        addSize: 16,
                        age: "123",
                        ok: true,
                        loginType: "username",
                        items: [
                                { message: 'Foo', id: "001" },
                                { message: 'Bar', id: "002" }
                        ],
                        type: "A",
                        styleObject: {
                                color: 'red',
                                fontSize: '13px'
                        }
                }
                //add-size是事件名称,上面组件名称一样即可,button的click事件转化为父组件的
                Vue.component('blog-post', {
                        data: function () {
                                return {
                                        adSize: 16
                                }
                        },
                        props: ['post'],
                        template: `<div :id="post.id" :key="post.id" :title="post.title" :style="{ fontSize: adSize }" >
                                        <h3>{{post.title}}</h3>
                                        <p  v-html="post.content"></p>
                                        <button @click="adSize++">
                                                放大
                                        </button>
                                   </div>
                                `
                })

                new Vue({
                        el: '#app',
                        data: data,
                        watch: {
                                msg: function (val1, val2) {
                                        this.foo = val1 + "1"
                                }
                        },
                        computed: {
                                reversedMessage1: function () {
                                        //如果计算值没有响应值不会实时更新，之执行一次
                                        //return Date.now();
                                        //值会缓存
                                        return this.msg.split('').reverse().join('')
                                }
                        },
                        methods: {

                                change: function () {
                                        if (this.ok) {
                                                // this.loginType = 123;
                                                this.items.unshift({ message: '新元素', id: "003" })
                                        } else {

                                                this.loginType = "username";
                                        }
                                        this.ok = !this.ok

                                },
                                testHide: function () {

                                        this.awesome = !this.awesome;
                                },
                                addSize1: function () {
                                        this.addSize = this.addSize + 1;
                                },
                                changeSize: function () {
                                        this.fsize = !this.fsize;
                                },
                                doclick: function () {
                                        //事件方法要写在methods中
                                        alert('点击了')
                                },
                                onEnter1: function () {

                                        alert('enter')
                                },
                                reversedMessage2: function () {
                                        //每当触发重新渲染时，调用方法将总会再次执行函数
                                        return Date.now();
                                        // return this.msg.split('').reverse().join('')
                                },
                                copy: function () {

                                },
                        },
                        created: function () {
                                // `this` 指向 vm 实例
                                console.log('foo is: ' + this.foo)
                        }

                })
                data.msg = "新消息!"



        </script>
</body>

</html>